import React from 'react';
import { start, rectangle, action, challenge } from '../utils/icon';
import { NODE } from '../utils/constants';
import './index.less';
import useDragToCreateNode from '../hook/useDragToCreateNode';

export default function ToolBox(props) {
  const { handleDown, _cur } = useDragToCreateNode(props);
  return (
    <div className='flow-tool'>
      <h5>工具栏</h5>
      <div className='tool-item'>
        <div
          className='tool-item-shape'
          onMouseDown={handleDown.bind(this, NODE._START)}
          data-intro='拖拽式图标，可拖拽行程流程图'
          data-step='1'
        >
          <img src={start} alt='开始' style={{ width: '32px', height: '32px' }} />
        </div>
        <div>开始</div>
      </div>
      <div className='tool-item'>
        <div className='tool-item-shape' onMouseDown={handleDown.bind(this, NODE._STRATEGY)}>
          <img src={rectangle} alt='规则' className='rect' style={{ width: '32px', height: '32px' }} />
        </div>
        <div>规则</div>
      </div>
      {/* <div className='tool-item'>
        <div className='tool-item-shape' onMouseDown={handleDown.bind(this, NODE._CROSS)}>
          <img src={cross} alt='分流' className='rect' style={{ width: '32px', height: '32px' }} />
        </div>
        <div>分流</div>
      </div> */}
      <div className='tool-item'>
        <div className='tool-item-shape' onMouseDown={handleDown.bind(this, NODE._ACTION)}>
          <img src={action} alt='动作' className='rect' style={{ width: '32px', height: '32px' }} />
        </div>
        <div>动作</div>
      </div>
      <div className='tool-item'>
        <div className='tool-item-shape' onMouseDown={handleDown.bind(this, NODE._CHALLENGE)}>
          <img src={challenge} alt='冠军挑战' style={{ width: '32px', height: '32px' }} />
        </div>
        <div>冠军挑战</div>
      </div>
      {/* <div className='tool-item'>
        <div className='tool-item-shape' onMouseDown={handleDown.bind(this, NODE._END)}>
          <img src={end} alt='结束' style={{ width: '32px', height: '32px' }} />
        </div>
        <div>结束</div>
      </div> */}

      {_cur}
    </div>
  );
}
